<template>
    <div class="mineralData" ref="mineraldata">

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const mineraldata = ref(null)
const option = {
    "legend": {
        "orient": "horizontal",
        "y": "bottom",
        "x": "center",
        "data": ["设备", "建材", "食品"],
        "itemWidth": 10,
        "itemHeight": 10,
        "textStyle": {
            "color": "#fff"
        },
    },

    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 500,
        max: 600,
        inRange: {
            //colorLightness: [0, 1]
        }
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '60%'],
        center: ['50%', '50%'],
        color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'],
        data: [{



            value: 285,
            name: '设备'
        },
        {
            value: 410,
            name: '建材'
        },
        {
            value: 274,
            name: '食品'
        }
        ].sort(function (a, b) {
            return a.value - b.value
        }),
        roseType: 'radius',

        label: {
            normal: {
                formatter: ['{c|{d}%}', '{b|{b}}'].join('\n'),
                rich: {
                    c: {
                        color: 'rgb(241,246,104)',
                        fontSize: 20,
                        fontWeight: 'bold',
                        lineHeight: 5
                    },
                    b: {
                        color: 'rgb(98,137,169)',
                        fontSize: 15,
                        height: 40
                    },
                },
            }
        },
        labelLine: {
            normal: {
                lineStyle: {
                    color: 'rgb(98,137,169)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,

            }
        },
        itemStyle: {
            normal: {
                shadowColor: 'rgba(0, 0, 0, 0.8)',
                shadowBlur: 50,
            }
        }
    }]
};
onMounted(() => {
    var myChart = echarts.init(mineraldata.value);

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})
</script>

<style scoped lang="scss">
.mineralData {
    width: 100%;
    height: 90%;
    margin-top: 10px;
}
</style>
